<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7">{{ year }}年借阅的第一本书</p>
      <p class="big">《{{ title }}》</p>
      <p class="o5">借阅时间：{{ time }}</p>
    </div>

    <div class="page-main-box">
      <div class="page-opacity-box flex-column-center">
        <div class="big-book-img">
          <img :src="imgUrl || bookNull()" @error.once="moveErrorImg" />
        </div>
        <div class="big-book-tt">{{ title }}</div>
        <div class="big-book-pp">ISBN：{{ isbn }}</div>
      </div>
    </div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>
import moment from 'moment'
import { report } from '@/mixins/report'
import { getBookCover } from '@/utils/bookCover'

export default {
  name: 'pageBorrowFirst',
  props: ['reportData', 'year'],
  mixins: [report],
  data () {
    return {
      title: '',
      time: '',
      imgUrl: '',
      isbn: ''
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data2)
          this.title = d.title
          this.time = moment(d.regtime).format('YYYY-MM-DD')
          this.isbn = d.isbn
          getBookCover([{ ...d }]).then(res => {
            if (res.keybook[d.isbn.replace(/-/g, '')]) {
              this.imgUrl = res.keybook[d.isbn.replace(/-/g, '')].resourceLink
            }
          })
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #ae5454 0%, #e38d8d 50%, #e38d8d 85%, #ae5454 100%);
  background-size: 100%;
  overflow: hidden;
}
.big-book-img {
  width: 462px;
  height: 670px;
  border-radius: 30px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.big-book-tt {
  font-size: 46px;
  color: #333;
  padding: 30px 0;
}
.big-book-pp {
  font-size: 32px;
  color: #333;
}
.page-info-title {
  .big {
    height: auto;
    font-size: 60px;
    line-height: 80px;
    padding: 20px 0;
    text-indent: -0.5em;
  }
}
.cover-bg {
  width: 200%;
  height: 200%;
  position: absolute;
  left: -50%;
  top: -50%;
  filter: blur(40px);
}
</style>
